<template lang="html">
  <section class="component-book_selector_top">
  <div class="selector_top">
	<ul class="title">
		<li v-for="item in courts" class="title_item">
			<div class="item_detail">
				<span>{{item.name}}({{item.courtType}})</span>
				<span>{{item.courtCondition}}</span>
			</div>
		</li>
	</ul>
  </div>
  </section>
</template>
<script>
export default {
	props: {
	    courts: {
		  type: Array,
		  requried: true
		}
	}
}
</script>
<style lang="scss" scoped>
.selector_top{
	.title{
		.title_item{
			display: inline-block;
			width: 110px;
			height: 70px;
			text-align: center;
			margin-left: 3px;
			margin-right: 3px;
			.item_detail{
				height:100%;
				width:100%;
				span{
					font-weight: 500;
					margin-top: 10px;
    				display: block;
				}
			}
		}
	}
}
</style>
